<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Xc5yOQFKDaHwQBHz2M0WZVBGEjG6HWav">-->
    <script type="text/javascript" src="./xiuluo.js">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
</head>

<body>
    <div id="container" style="height:100%;width:100%;position:absolute;z-index: 0;"></div>
<div style="opacity:0.5;top: 100px;left:100px;height:100px;width:100px;background-color: red;position:absolute;z-index: 1;"></div>
</body>

<script type="text/javascript">
    // var map = new BMap.Map("container");
    // // 创建地图实例
    // var point = new BMap.Point(116.404, 39.915);
    // // 创建点坐标
    // map.centerAndZoom(point, 15);
    // // 初始化地图，设置中心点坐标和地图级别

    var map = new BMap.Map("container");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
    map.addControl(new BMap.ScaleControl()); // 添加比例尺控件

    var pointStr = "104.038748,30.641821,104.047789,30.648128,104.063959,30.655336,104.067264,30.660307,104.067264,30.664438,104.064008,30.665316".split(",");

    var pointArr = [];

    for (var k = 0; k < pointStr.length; k += 2) {
        pointArr.push({
            lng: pointStr[k],
            lat: pointStr[k + 1]
        });
    }
    // 生成坐标点
    var trackPoint = [];
    for (var i = 0, j = pointArr.length; i < j; i++) {
        trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
    }
    map.centerAndZoom(trackPoint[0], 15);

    // 画线
    var polyline = new BMap.Polyline(trackPoint, {
        strokeColor: "#ad0e21",
        strokeWeight: 3,
        setStrokeStyle:"dashed",
        strokeOpacity: 1
    });
    map.addOverlay(polyline);
    // 配置图片
    var size = new BMap.Size(22, 22);
    var offset = new BMap.Size(0, 0);
    var imageSize = new BMap.Size(20, 20);
    var icon = new BMap.Icon("./images/f5.jpg", size, {
        imageSize: imageSize,
        infoWindowAnchor:new BMap.Size(0, -3)
    });


    // 画图标
    for (var i = 0, j = trackPoint.length; i < j; i++) {
        var marker = new BMap.Marker(trackPoint[i], {
            icon: icon,
            offset: offset
        }); // 创建标注
        map.addOverlay(marker);
        marker.addEventListener("click",function () {
            // alert(this.getPosition())
            var point=this.getPosition();
            alert("经度："+point.lng+"\n"+"纬度："+point.lat)
        })

    }

    //根据经纬极值计算绽放级别。 (从网上复制)
    function getZoom(maxLng, minLng, maxLat, minLat) {
        var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。
        var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标A
        var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B
        var distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
            if (zoom[i] - distance > 0) {
                return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
            }
        }
    }

    //  (从网上复制)
    function setZoom(points) {
        if (points.length > 0) {
            var maxLng = points[0].lng;
            var minLng = points[0].lng;
            var maxLat = points[0].lat;
            var minLat = points[0].lat;
            var res;
            for (var i = points.length - 1; i >= 0; i--) {
                res = points[i];
                if (res.lng > maxLng) maxLng = res.lng;
                if (res.lng < minLng) minLng = res.lng;
                if (res.lat > maxLat) maxLat = res.lat;
                if (res.lat < minLat) minLat = res.lat;
            }
            var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
            var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
            var zoom = getZoom(maxLng, minLng, maxLat, minLat);
            map.centerAndZoom(new BMap.Point(cenLng, cenLat), zoom);
        } else {
            //没有坐标，显示全中国
            map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5);
        }
    }

    setZoom(pointArr)

</script>

</html>